@font-face {
    font-family: 'Product Sans';
    src: url(ProductSans-Regular.ttf);
}

@font-face {
    font-family: 'Product Sans Medium';
    src: url(ProductSans-Medium.ttf);
}

@font-face {
    font-family: 'Product Sans Bold';
    src: url(ProductSans-Bold.ttf);
}

@font-face {
    font-family: 'Product Sans Black';
    src: url(ProductSans-Black.ttf);
}

* {
    font-family: 'Product Sans', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    /*variables*/
    --body_bg_after: url(../img/bg.svg) repeat fixed;
    --body_op_after: 0.6;
    --body_bg_norm: linear-gradient(#F9A8D4, #FCE7F3) fixed;
    --main_bg_color: #F48FB1;
    --banner_text_shadow: drop-shadow(0 0 8px #AD1457);
}

#load {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: 1280;
    background-color: var(--main_bg_color);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 100%;
    transition: 800ms;
}

.load_hoshi>img {
    width: 8vw;
    min-width: 72px;
}

.load_hoshi {
    width: 8vw;
    height: 8vw;
    min-width: 72px;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: rotation 4000ms linear infinite;
}

.option_hoshi {
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition: transform 500ms;
}

body {
    background: var(--body_bg_norm);
}

body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--body_bg_after);
    background-size: 128px;
    z-index: -1;
    opacity: var(--body_op_after);
}

.rocky_nav {
    background-color: var(--main_bg_color) !important;
    filter: drop-shadow(0 0 2px);
}

.lang_switch {
    height: 24px;
}

.gap {
    margin-top: 56px;
}

.footer {
    height: 256px;
    text-align: left;
    padding: 24px 24px 24px 24px;
    display: flex;
    flex-direction: column;
    background-color: var(--main_bg_color);
    color: #FFFFFF !important;
}

.f_links {
    display: flex;
    padding: 0;
    align-items: center;
}

.f_links>* {
    margin: 0 16px 0 0;
}

.f_links>li>a {
    color: white;
    text-decoration: none;
}

.f_gap {
    flex-grow: 1;
}

.ft_gap {
    flex-grow: 1;
}

.Sect1 {
    display: flex;
}

.f_sn>a>img {
    height: 48px !important;
}

.f_sn>a {
    display: inline-block;
}


.f_sn>a {
    margin-left: 8px;
}

.f_sn>a:nth-child(1) {
    margin: 0;
}

.banner_stub {
    width: 100%;
    max-width: 1024px;
}

.banner_stub_mobile {
    width: 100%;
}


.banner {
    position: relative;
}

.banner_text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.banner_text>div {
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.banner_text>div>* {
    filter: var(--banner_text_shadow);
}

.banner_h1 {
    display: flex;
    align-items: center;
}

.banner_hoshi {
    width: calc(1.375rem + 1.5vw);
    height: calc(1.375rem + 1.5vw);
    object-fit: contain;
    animation: rotation 2000ms linear infinite;
}

.link_disabled {
    pointer-events: none;
    opacity: 0.8;
}

@keyframes rotation {
    0% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(90deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(270deg);
    }

    100% {
        transform: rotate(360deg);
    }
}